@startuml
  title Диаграмма отправки сообщений от контекстного скрипта к компонентам расширения
  left to right direction

  frame "Активная вкладка" {
    component [content_script.js] as content_script
    portout pout_av as "chrome.runtime.sendMessage()"
  }

  frame "Компоненты расширения" {
    frame "Options Tab" as OPTIONS_FRAME {
      component [options.js] as options
    }
    frame "Popup Menu" as POPUP_FRAME {
      component [popup.js] as popup
    }
    component [background.js] as background
    frame "DevTools" as DEVTOOLS_FRAME {
      component [devtools.js] as devtools_script
      frame "DevTools" as DEVTOOLS_PANELS {
        component [panel.js] as panel_script
        component [panels_elements.js] as panels_elements_script
        component [panels_sources.js] as panels_sources_scrip
      }
    }
    portin pin_cr as "chrome.runtime.onMessage.addListener()"
    portout pout_cr as "sendResponse()"
  }

  content_script --> pout_av: 1 Отправка запроса
  pout_av --> pin_cr: 2
  pin_cr --> background: 3
  pin_cr --> options: 3
  pin_cr --> popup: 3
  pin_cr --> devtools_script: 3
  pin_cr --> panel_script: 3
  pin_cr --> panels_elements_script: 3
  pin_cr --> panels_sources_scrip: 3

  background --> pout_cr : 4
  options --> pout_cr : 4
  popup --> pout_cr : 4
  devtools_script --> pout_cr : 4
  panel_script --> pout_cr : 4
  panels_elements_script --> pout_cr : 4
  panels_sources_scrip --> pout_cr : 4

  pout_cr --> content_script: 5 Отправка ответа
}
@enduml